<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>

</head>
<body>

<div id="app">
    <h3>循环使用</h3>
    <coma v-for="user in users" :id="user.id" :username="user.userName" :password="user.password"></coma>

</div>

</body>

<script>

    //全局组件:整个项目中都可以使用到
    //局部组件:只能当前页面中使用

    //目前我们vue.js中 html这种形式体会不到的....

    const app = Vue.createApp({
        data() {
            return {
                users:[
                    {id:1,userName:'张三',password:'123456'},
                    {id:2,userName:'李四',password:'123456'},
                    {id:3,userName:'王五',password:'123456'},
                    {id:4,userName:'赵六',password:'123456'},
                    {id:5,userName:'小王',password:'123456'},
                ]
            }
        },
        methods: {}
    })

    //定义全局组件:目前vue.js中没法写复杂的组件 等到脚手架可以写单独的组件xxx.vue
    app.component('coma',{
        props:['id','username','password'],
        template:'id:<span v-text="id"></span>用户名:<span v-text="username"></span>密码:<span v-text="password"></span><br/>' //template:就是vue中的template模板
    })



    app.mount("#app")
</script>

</html>